var Event = require("bcore/event");
var $ = require("jquery");
var _ = require("lodash");
//var Chart = require('XXX');
import "echarts-gl";
var Echarts = require("echarts");
var shanxi = require('./shanxi.json')

/**
 * 马良基础类
 */
module.exports = Event.extend(
  function Base(container, config) {
    this.config = {
      theme: {},
    };
    this.container = $(container); //容器
    this.apis = config.apis; //hook一定要有
    this._data = null; //数据
    this.chart = null; //图表
    this.init(config);
  },
  {
    /**
     * 公有初始化
     */
    init: function (config) {
      //1.初始化,合并配置
      this.mergeConfig(config);
      //2.刷新布局,针对有子组件的组件 可有可无
      this.updateLayout();
      //3.子组件实例化
      this.chart = Echarts.init(this.container[0]);
      //this.chart = new Chart(this.container[0], this.config);
      //4.如果有需要, 更新样式
      this.updateStyle();
    },
    /**
     * 绘制
     * @param data
     * @param options 不一定有
     * !!注意: 第二个参数支持config, 就不需要updateOptions这个方法了
     */
    render: function (data, config) {
      console.log(data, 'data')
      var geoCoordMap = {
        //这里放你打点的坐标信息，虚拟信息
        莱芜市: [112.53, 37.87],
        威海市: [112.65, 38.05],
        滨州市: [113.3, 40.12],
        临沂市: [118.364156, 35.119965],
        淄博市: [118.069799, 36.82475],
        日照市: [119.532384, 35.425496],
        烟台市: [121.454902, 37.480081],
        菏泽市: [115.48038, 35.248354],
      };
      var locValue = [
        { name: "莱芜市", value: 80 },
        { name: "威海市", value: 140 },
        { name: "滨州市", value: 10 },
        { name: "临沂市", value: 100 },
        { name: "淄博市", value: 100 },
        { name: "日照市", value: 100 },
        { name: "德州市", value: 100 },
        { name: "烟台市", value: 0 },
        { name: "菏泽市", value: 100 },
      ];
      var geoCoordMap1 = {
        //这里放你打点的坐标信息，虚拟信息
        青岛市: [120.397057, 36.07041],
        东营市: [118.681509, 37.447084],
        潍坊市: [119.164438, 36.71744],
        济南市: [117.122338, 36.661876],
        聊城市: [115.986305, 36.465225],
        泰安市: [117.090143, 36.212179],
        枣庄市: [117.329308, 34.824652],
        济宁市: [116.588817, 35.433025],
      };
      var locValue1 = [
        { name: "青岛市", value: 0 },
        { name: "东营市", value: 100 },
        { name: "潍坊市", value: 100 },
        { name: "济南市", value: 100 },
        { name: "聊城市", value: 100 },
        { name: "泰安市", value: 100 },
        { name: "枣庄市", value: 100 },
        { name: "济宁市", value: 100 },
      ];
      data = this.data(data);
      var cfg = this.mergeConfig(config);
      let spotArr = data[0].spot.slice()
      spotArr.forEach(item => {
        item.value.push("spot")
        item.name = ''
      });
      let columnArr = data[0].column.slice()
      columnArr.forEach(item => {
        item.name = ''
        item.visualMap = false
        item.value.push("column")
      });
      const that = this;
      var uploadedDataURL = "./shanxi.json";
      this.chart.showLoading();
      // $.getJSON(uploadedDataURL, function (geoJson) {
        // 注册地图名字(tongren)和数据(geoJson)
        Echarts.registerMap("tongren", shanxi);

        // 隐藏动画加载效果。
        that.chart.hideLoading();

        // 图表配置项
        var option = {
          visualMap: [
            {
              show: false,
              // 第一个 visualMap 组件
              type: "continuous", // 定义为连续型 visualMap
              dimension: 3,
              // splitNumber: 5,
              // color: ["rgba(19, 227, 255, 0)", "rgba(19, 227, 255, 0.48)", "rgba(19, 227, 255, 0.8)"],
              // categories: ['spot'],
              // color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //     { offset: 0, color: "rgba(19, 227, 255, 0)" },
              //     { offset: 0.5, color: "rgba(19, 227, 255, 0.48)" },
              //     { offset: 1, color: "rgba(19, 227, 255, 0.8)" },
              //   ]),
              colorLightness: [0, 1],
              // inRange: {
              //   // symbolSize: [10, 90],
              //   // symbol: 'path://M3 133.715V1H11V133.715C12.2275 134.301 13 135.152 13 136.1C13 137.867 10.3137 139.3 7 139.3C3.68629 139.3 1 137.867 1 136.1C1 135.152 1.7725 134.301 3 133.715ZM3 134.617C2.11885 135.122 1.8 135.676 1.8 136.1C1.8 136.544 2.15091 137.133 3.13383 137.657C4.08237 138.163 5.44788 138.5 7 138.5C8.55212 138.5 9.91763 138.163 10.8662 137.657C11.8491 137.133 12.2 136.544 12.2 136.1C12.2 135.676 11.8812 135.122 11 134.617V135.327C11 136.417 9.20913 137.3 7 137.3C4.79087 137.3 3 136.417 3 135.327V134.617Z',
              //   color: {
              //     spot: '#FFD644'
              //   }
              // },
              inRange: {
                color: ['rgba(255, 214, 68, .3)', 'rgba(255, 214, 68, 0.5)', 'rgba(255, 214, 68, 1)'],
                symbolSize: [5, 15]
              }
            },
          ],
          geo3D: {
            map: "tongren", // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同。
            regionHeight: 3, // 地图厚度
            boxWidth: 40,
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            viewControl: {
              projection: "perspective",
              rotateSensitivity: 0,
              distance: 55,
              alpha: 50,
              beta: 40,
              animation: true,
              center: [0, 0, 8],
            },
            itemStyle: {
              opacity: 1, // 透明度
              color: "#002732", // 地图颜色
              borderWidth: 1, // 分界线宽度
              borderColor: "#93ECFF", // 分界线颜色
            },
            // emphasis: { // 鼠标 hover 高亮时图形和标签的样式。
            //   label: {
            //     show: true, // 是否显示标签
            //     textStyle: {
            //       color: '#fff', // 高亮文字颜色
            //       fontSize: 32,
            //       fontFamily: '微软雅黑'
            //     }
            //   }
            // },
            // viewControl: { // 用于鼠标的旋转，缩放等视角控制。
            //   distance: 140, // 地图视角 控制初始大小
            //   zoomSensitivity: 1, // 缩放
            //   minBeta: -360,
            //   maxBeta: 360
            // },
            light: {
              // 光照阴影
              main: {
                color: "#fff", // 光照颜色
                intensity: 1.2, // 光照强度
                shadowQuality: "high", // 阴影亮度
                shadow: false, // 是否显示阴影
                alpha: 55,
                beta: 10,
              },
              ambient: {
                intensity: 0.3,
              },
            },
          },

          series: [
            {
              name: "tongren",
              type: "bar3D",
              coordinateSystem: "geo3D", // 该系列使用的坐标系
              // symbol:
              //   "path://M3 133.715V1H11V133.715C12.2275 134.301 13 135.152 13 136.1C13 137.867 10.3137 139.3 7 139.3C3.68629 139.3 1 137.867 1 136.1C1 135.152 1.7725 134.301 3 133.715ZM3 134.617C2.11885 135.122 1.8 135.676 1.8 136.1C1.8 136.544 2.15091 137.133 3.13383 137.657C4.08237 138.163 5.44788 138.5 7 138.5C8.55212 138.5 9.91763 138.163 10.8662 137.657C11.8491 137.133 12.2 136.544 12.2 136.1C12.2 135.676 11.8812 135.122 11 134.617V135.327C11 136.417 9.20913 137.3 7 137.3C4.79087 137.3 3 136.417 3 135.327V134.617Z",
              // symbolSize: [10, 40],
              opacity: 1,
              label: {
                show: true,
                formatter: "{b}",
              },
              itemStyle: {
                color: "rgba(19, 227, 255, 0.8)"
              },
              data: columnArr,
            },
            {
              name: "tongren2",
              type: "scatter3D",
              coordinateSystem: "geo3D", // 该系列使用的坐标系
              symbol: "circle",
              // symbolSize: [10, 10],
              opacity: 1,
              label: {
                show: true,
                formatter: "{b}",
              },
              data: spotArr,
            },
            // {
            //   type: "map3D",
            //   name: "map3D",
            //   map: "tongren",
            //   regionHeight: 5,
            //   label: {
            //     show: true,
            //     textStyle: {
            //       color: "#ffffff00",
            //       fontSize: 8,
            //       opacity: 1,
            //       backgroundColor: "rgba(0,23,11,0)",
            //     },
            //   },
            //   itemStyle: {
            //     color: "#01313C",
            //     opacity: 1,
            //     borderWidth: 1.5,
            //     borderColor: "#35F3FC",
            //   },
            //   light: {
            //     main: {
            //       color: "#ffffff",
            //       intensity: 1.2,
            //       shadow: false,
            //       alpha: 55,
            //       beta: 10,
            //     },
            //     ambient: {
            //       color: "#ffffff00",
            //       intensity: 0.5,
            //     },
            //   },
            //   viewControl: {
            //     projection: "perspective",
            //     autoRotate: false,
            //     autoRotateDirection: "cw",
            //     autoRotateSpeed: 10,
            //     autoRotateAfterStill: 3,
            //     damping: 0,
            //     rotateSensitivity: 1,
            //     zoomSensitivity: 1,
            //     panSensitivity: 1,
            //     panMouseButton: "left",
            //     rotateMouseButton: "left",
            //     distance: 200,
            //     minDistance: 40,
            //     maxDistance: 400,
            //     alpha: 40,
            //     beta: 15,
            //     minAlpha: -360,
            //     maxAlpha: 360,
            //     minBeta: -360,
            //     maxBeta: 360,
            //     center: [0, 0, 0],
            //     animation: true,
            //     animationDurationUpdate: 1000,
            //     animationEasingUpdate: "cubicInOut",
            //   },
            // },
          ],
        };
        // 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
        that.chart.setOption(option);
      // });

      //如果有需要的话,更新样式
      this.updateStyle();
    },
    /**
     *
     * @param width
     * @param height
     */
    resize: function (width, height) {
      this.updateLayout(width, height);
      this.chart.resize({ width, height });
      //更新图表
      //this.chart.render({
      //  width: width,
      //  height: height
      //})
    },
    convertData: function (geoCoordMap, data) {
      console.log(data);
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: "",
            value: geoCoord.concat(Number(data[i].value)),
          });
        }
      }
      console.log(res, "res");
      return res;
    },
    /**
     * 每个组件根据自身需要,从主题中获取颜色 覆盖到自身配置的颜色中.
     * 暂时可以不填内容
     */
    setColors: function () {
      //比如
      //var cfg = this.config;
      //cfg.color = cfg.theme.series[0] || cfg.color;
    },
    /**
     * 数据,设置和获取数据
     * @param data
     * @returns {*|number}
     */
    data: function (data) {
      if (data) {
        this._data = data;
      }
      return this._data;
    },
    /**
     * 更新配置
     * 优先级: config.colors > config.theme > this.config.theme > this.config.colors
     * [注] 有数组的配置一定要替换
     * @param config
     * @private
     */
    mergeConfig: function (config) {
      if (!config) {
        return this.config;
      }
      this.config.theme = _.defaultsDeep(config.theme || {}, this.config.theme);
      this.setColors();
      this.config = _.defaultsDeep(config || {}, this.config);
      return this.config;
    },
    /**
     * 更新布局
     * 可有可无
     */
    updateLayout: function () {},
    /**
     * 更新样式
     * 有些子组件控制不到的,但是需要控制改变的,在这里实现
     */
    updateStyle: function () {
      var cfg = this.config;
      this.container.css({
        "font-size": cfg.size + "px",
        color: cfg.color || "#fff",
      });
    },
    /**
     * 更新配置
     * !!注意:如果render支持第二个参数options, 那updateOptions不是必须的
     */
    //updateOptions: function (options) {},
    /**
     * 更新某些配置
     * 给可以增量更新配置的组件用
     */
    //updateXXX: function () {},
    /**
     * 销毁组件
     */
    destroy: function () {
      console.log("请实现 destroy 方法");
    },
  }
);
